<template>
    <div v-if="detail">
        <h1>交易订单详细信息</h1>
        <LabelTitle title="当前订单进度"></LabelTitle>
        <div class="a">
            <el-timeline>
                <el-timeline-item v-for="(activity, index) in activities" :key="index" :icon="activity.icon"
                    :type="activity.type" :hollow="activity.hollow">
                    {{ activity.content }}
                </el-timeline-item>
            </el-timeline>
        </div>
        <BuyerData :item="detail.buy" />
        <SellerData :item="detail.sell" />
        <el-form-item label="审核意见" style="margin-top: 2rem;">
            <el-input placeholder="请输入审核意见" clearable type="textarea" v-model="option" />
        </el-form-item>

        <div style="display:flex">
            <el-button type="primary" :icon="Check" @click="handleClick">审核通过</el-button>
            <el-button type="danger" @click="router.back()">取消审核</el-button>
        </div>
    </div>
    <div v-else>
        <el-skeleton :rows="80" animated />
    </div>
</template>

<script lang="ts" setup>
import { useDetailStore } from "../../../../../store/user";
import { MoreFilled } from '@element-plus/icons-vue'
import { transactionSelect } from "../../../../../select/user";
import { useRoute, useRouter } from "vue-router";
import { ref, watch } from "vue";
import LabelTitle from "@/components/LabelTitle/index.vue"
import { ElMessage } from "element-plus";
import BuyerData from "../../../user/views/transaction/component/BuyerData.vue";
import SellerData from "../../../user/views/transaction/component/SellerData.vue";
import {
    Check,
    Delete,
    Edit,
    Message,
    Search,
    Star,
} from '@element-plus/icons-vue'

import { useDetail } from "../../hooks/useDetail";
import { useUserStore } from "../../../../store/user";
import { transactionVerifyApi } from "../../../../api/a";
import { responseCallback } from "../../../../utils";
const dialogVisible = ref(false)
const { query, params: { id } } = useRoute();
const option = ref("");

const router = useRouter();

const { detail, activities } = useDetail(id)
const userStore = useUserStore();
const handleClick = () => {

    responseCallback({
        promise: transactionVerifyApi({
            id: detail.value.id,
            adminId: userStore.id,
            pass: 1
        }),
        cb() {
            setTimeout(() => {
                location.reload();
            }, 3000)
        },
        successMessage: "提交审核成功"
    })
}


</script>

<style scoped lang="less">
.a {
    display: flex;

    .el-timeline {
        width: 300px;
    }

    div {
        flex: 1
    }
}
</style>